<template>
	<view class="main" @tap="goPage(`/pages/info/info?id=${info.id}`)">
		<div class="img-wrap"><image class="img" :src="info.imgs[0]" mode="widthFix" /></div>
		<div class="bottom-wrap">
			<div class="title">{{ info.title || info.text }}</div>
		</div>
	</view>
</template>

<script>
import { goPage } from '@/lib/js/utils';
export default {
	name: 'img-block',
	props: ['info'],
	data() {
		return {};
	},
	methods: {
		goPage
	}
};
</script>

<style lang="scss" scoped>
.main {
	border-radius: 10rpx;
	overflow: hidden;

	.img-wrap {
		box-shadow: 1rpx 2rpx 4rpx rgba(#333, 0.3);
	}

	.bottom-wrap {
		padding: 10rpx;
		margin-bottom: 20rpx;

		.title {
			overflow: hidden;
			white-space: nowrap;
			text-overflow: ellipsis;
		}
	}
}
</style>
